크롬 확장프로그램에 케시메모리 추가하기
크롬 확장 프로그램을 통해 트레이딩 도구를 개발하는 도중, 한 가지 큰 문제가 있었다.
문제 상황#
크롬 확장 프로그램은 일반 앱처럼 보이지만, 사용자가 팝업 창이나 사이드바를 닫으면 확장 프로그램의 세션이 완전히 종료된다. 이로 인해 사용자가 입력했던 데이터나 현재 보고 있던 화면 위치가 저장되지 않고, 재접속 시 항상 처음 화면으로 돌아가게 된다. 멀티태스킹 환경에서 트레이더들은 확장 프로그램을 수시로 열고 닫아야 하는데, 매번 처음부터 시작해야 하는 것은 큰 불편함이었다.
해결 방안#
문제를 해결의 목표를 단순하게 정리하면 다음과 같다
크롬 확장프로그램을 사용하는 와중 확장프로그램의 창을 닫고 키면 이전 창의 정보를 복원시킨다.
해당 목적을 달성하기 위해선 단순하게 사용자가 사용하고 있는 정보를 저장할 저장소만 있으면 되겠다고 판단하였다.
| 저장소 | 최대 용량 | 데이터 구조 | 비동기 지원 | 지속성 | 다른 탭/창 공유 |
|---|---|---|---|---|---|
localStorage | 5MB | 문자열(JSON) | ❌(동기) | 브라우저 종료 후에도 유지 | ✅(같은 출처에서 공유) |
sessionStorage | 5MB | 문자열(JSON) | ❌(동기) | 탭(세션)이 닫히면 삭제 | ❌(탭마다 독립적) |
chrome.storage.local | 10MB (확장 프로그램) | JSON 객체 저장 가능 | ✅(비동기) | 브라우저 종료 후에도 유지 | ✅(확장 프로그램 내에서 공유 가능) |
chrome.storage.session | 10MB (확장 프로그램) | JSON 객체 저장 가능 | ✅(비동기) | 확장 프로그램이 종료되면 삭제 | ✅(확장 프로그램 내에서 공유 가능) |
IndexedDB | GB 단위 | 객체 저장 가능 (JSON, 배열 포함) | ✅(비동기) | 브라우저 종료 후에도 유지 | ✅(같은 출처에서 가능) |
background.js | 제한 없음 (메모리 사용량 만큼) | 모든 JS 객체 저장 가능 | ✅(비동기) | 브라우저 종료되면 삭제 (persistent: false일 경우) | ✅(확장 프로그램 내 모든 페이지와 공유) |
서로 다른 장단점이 있지만 내가 원하는 기능을 하기위해서는 background.js가 가장 적합하였다.
그 이유는 다음과 같다.
- pin 정보같은 민감한 정보도 일시적으로 저장될 수 있기 때문에 localStorage와 sessionStorage그리고 IndexedDB를 이용하지 않아야 한다.
- 확장프로그램이 닫혀도 정보가 유지되어야 하기 때문에 chrome.storage.session과 sessionStorage를 이용할 수 없다.
background.js를 이용하는 방법이 내가 내가 원하는 사용자 경험과 가장 잘 맞았다.
문제 해결 로직#
문제를 해결하기 위해서는 2가지 기능이 필요하다.
- 앱을 사용하는 동안 사용자의 현제 라우트 위치와 해당 위치에 필요한 데이터 저장하기.
- 앱을 켤때
background.js에 저장된 앱의 상태가 있는지 확인하고 있다면 복원하기.
현제 프로젝트에서는 react-query를 사용중이기 때문에 react-query와 context 그리고 hook을 사용하여 앱의 상태를 저장하고 앱을 실행시킬때 불러오는 작업을 담당하도록 하였다.
background.js 와 통신하기#
background.js는 브라우저 영역에서 작동하는 스크립트 이다.
background.js 와 크롬 확장프로그램은 서로 chrome.runtime.onMessage 와 chrome.runtime.sendMessage 함수로 통신이 가능하다.
간단하게 background.js를 작성해보자
JavaScriptjs
앱 상태에 접근하기 위한 인터페이스 만들기#
브라우저의 background.js와 통신하기 위한 유틸리티 함수를 만들어야 한다.
Typescripttypescript
React Query 통합#
React Query를 사용하여 캐시 상태를 관리하는 커스텀 훅을 만들었다.
React TSXtsx
useCacheQuery: 앱 상태를 가져오는 쿼리 (PIN이 유효할 때만 활성화)useCacheMutation: 앱 상태를 업데이트하는 뮤테이션
Context API로 앱 전체에서 접근 가능하게 만들기#
캐시 상태에 앱 전체에서 쉽게 접근할 수 있도록 React Context를 만들었다.
React TSXtsx
React TSXtsx
React TSXtsx
실제 사용 예시#
캐시 시스템을 실제로 어떻게 사용하는지 예시 코드를 살펴보자.
React TSXtsx
이런 식으로 다양한 컴포넌트에서 캐시를 활용하여 상태를 저장하고 복원할 수 있다.
최종 생각#
확장 프로그램 세션이 종료되어도 사용자 경험을 유지하는 것은 생각보다 까다로운 문제였다. background.js를 활용한 메모리 기반 캐시는 데이터의 민감성과 일시적인 저장 특성을 고려할 때 최적의 선택이었다. React Query와 Context API를 함께 사용함으로써 상태 관리 로직을 깔끔하게 구현할 수 있었고, 사용자 경험을 크게 향상시킬 수 있었다.
트레이딩 도구처럼 빠른 상호작용이 필요한 확장 프로그램에서는 이런 방식의 캐시가 매우 유용하다. 다음 프로젝트에서도 이런 패턴을 적극 활용해봐야겠다.